<template>
  <div class="practice-container">
    <!-- 题库标题和搜索 -->
    <div class="header">
      <h1>在线练题</h1>
      <div class="search-bar">
        <van-field
            v-model="searchText"
            placeholder="科一重难点+英文缩写"
            left-icon="search"
        />
      </div>
    </div>

    <!-- 科目分类 -->
    <van-tabs v-model:active="activeSubject" swipeable>
      <van-tab v-for="subject in subjects" :key="subject.id" :title="subject.name">
        <!-- 促销信息 -->
        <div class="promotion-banner" v-if="subject.promotion">
          {{ subject.promotion }}
        </div>

        <!-- 练习入口区域 -->
        <div class="practice-entries">
          <!-- 主练习按钮 -->
          <div class="main-actions">
            <div class="action-card" @click="startPractice('sequence')">
              <div class="action-icon">
                <van-icon name="column" size="24"/>
              </div>
              <div class="action-info">
                <h3>顺序练习</h3>
                <p>{{ completedCount }}/{{ totalCount }}</p>
              </div>
            </div>

            <div class="action-card" @click="startPractice('ai')">
              <div class="action-icon ai-icon">
                <span class="iconfont" style="font-size: 32px">&#xe6a7;</span>
              </div>
              <div class="action-info">
                <h3>AI练题</h3>
                <p>智能推荐薄弱环节</p>
              </div>
            </div>
          </div>

          <!-- 次级练习按钮 -->
          <div class="secondary-actions">
            <van-grid :column-num="3" :border="false">
              <van-grid-item
                  v-for="action in secondaryActions"
                  :key="action.type"
                  :text="action.text"
                  :icon="action.icon"
                  @click="startPractice(action.type)"
              />
            </van-grid>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {showToast} from 'vant'
import {onMounted} from 'vue';
import {getCurrentAnswerRecordAPI} from "@/api/question";
import AiGenerating from "@/components/AiGenerating/AiGenerating.vue";


const router = useRouter()

// 科目分类
const activeSubject = ref(0)
const subjects = ref([
  {id: 1, name: '科一', promotion: ''},
  {id: 2, name: '科二', promotion: ''},
  {id: 3, name: '科三', promotion: ''},
  {id: 4, name: '科四', promotion: ''},
])

// 练习数据
const searchText = ref('')
const completedCount = ref(0)
const totalCount = ref(1643)
const secondaryActions = ref([
  {type: 'special', text: '专项练题', icon: 'cluster-o'},
  {type: '500', text: '精简500题', icon: 'filter-o'},
  {type: 'wrong', text: '错题记录', icon: 'records'}
])

onMounted(async () => {
  const {data} = await getCurrentAnswerRecordAPI("C1", "科目一")
  completedCount.value = data.current
  totalCount.value = data.total
})

// 开始练习
const startPractice = (type: string) => {
  switch (type) {
    case 'sequence':
      router.push({name: 'SequentialPractice'})
      break
    case 'ai':
      router.push({name: "AiPractice"})
      break
    case 'special':
      router.push('/question/special-question')
      break
    case '500':
      router.push({name: 'ClassicQuestion'})
      break
    case 'wrong':
      router.push('/question/error-question')
      break
    default:
      showToast('功能开发中')
  }
}
</script>

<style scoped>
.practice-container {
  background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f8 100%);
  min-height: 100vh;
  padding-bottom: 50px;
}

.header {
  padding: 24px 20px;
  background: linear-gradient(135deg, #1989fa 0%, #39b9f9 100%);
  color: white;
  border-radius: 0 0 30px 30px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(25, 137, 250, 0.2);
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}

.header h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.search-bar :deep(.van-field) {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.search-bar :deep(.van-field:focus-within) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.promotion-banner {
  background: linear-gradient(135deg, #fff8e6 0%, #fff2d9 100%);
  color: #ff976a;
  padding: 12px 20px;
  font-size: 14px;
  margin: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid #ff976a;
  box-shadow: 0 4px 16px rgba(255, 151, 106, 0.12);
  position: relative;
  overflow: hidden;
}

.promotion-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.practice-entries {
  padding: 20px;
}

.main-actions {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.action-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.action-card:hover::before {
  opacity: 1;
}

.action-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: #1989fa;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.15);
  transition: all 0.3s ease;
}

.action-card:hover .action-icon {
  transform: scale(1.1);
}

.ai-icon {
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  color: #52c41a;
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.15);
}

.action-info h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  letter-spacing: 0.3px;
}

.action-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.secondary-actions {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px 0;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.secondary-actions :deep(.van-grid-item__content) {
  padding: 20px 12px;
  transition: all 0.3s ease;
}

.secondary-actions :deep(.van-grid-item__content:hover) {
  transform: translateY(-2px);
}

.secondary-actions :deep(.van-grid-item__icon) {
  font-size: 32px;
  color: #1989fa;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.secondary-actions :deep(.van-grid-item__content:hover .van-grid-item__icon) {
  transform: scale(1.1);
}

.secondary-actions :deep(.van-grid-item__text) {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

:deep(.van-tabs__wrap) {
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  margin: 0 20px;
}

:deep(.van-tab) {
  font-size: 16px;
  font-weight: 500;
  padding: 16px 0;
  transition: all 0.3s ease;
}

:deep(.van-tab--active) {
  font-weight: 600;
  color: #1989fa;
}

:deep(.van-tabs__line) {
  background: linear-gradient(to right, #1989fa, #39b9f9);
  height: 3px;
  border-radius: 3px;
  bottom: 0;
  transition: all 0.3s ease;
}

:deep(.van-tabs__nav) {
  background: transparent;
}

:deep(.van-tabs__nav--complete) {
  padding: 0 16px;
}

.location {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}

.promotion-courses {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.promotion-courses h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

.promotion-courses h3 span {
  color: #ff4d4f;
  font-size: 12px;
  margin-left: 10px;
}

.course-card {
  background-color: #f7f8fa;
  border-radius: 8px;
  padding: 15px;
  height: 100px;
  position: relative;
  width: 100%;
}

.course-tag {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 0 8px 0 4px;
}

.course-card h4 {
  font-size: 14px;
  margin-bottom: 15px;
}

.course-price {
  display: flex;
  align-items: center;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-right: 5px;
}

.current-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 10px;
}

.discount {
  font-size: 10px;
  color: #fff;
  background-color: #ff4d4f;
  padding: 2px 4px;
  border-radius: 4px;
}
</style>
